<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="utf-8">
    <title>欢迎页</title>
    <link rel="icon" href="../image/favicon.ico">
    <link rel="stylesheet" href="../library/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../library/font-awesome/css/font-awesome.css" media="all">
    <style>
        .welcome .layui-card {
            border: 1px solid #f2f2f2;
            border-radius: 5px;
        }

        .welcome .icon {
            margin-right: 10px;
            color: #1aa094;
        }

        .welcome .layuimini-qiuck-module {
            padding-top: 10px;
            text-align: center;
        }

        .welcome .layuimini-qiuck-module a i {
            display: inline-block;
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border-radius: 2px;
            font-size: 32px;
            background-color: #F8F8F8;
            color: #333;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .welcome .layuimini-qiuck-module cite {
            position: relative;
            top: 5px;
            display: block;
            color: #666;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 14px;
        }

        .welcome .welcome-module {
            width: 100%;
            height: 115px;
        }

        .welcome .panel {
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 3px;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
        }

        .welcome .panel-body {
            padding: 10px
        }

        .welcome .panel-title {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 12px;
            color: inherit
        }

        .welcome .label {
            display: inline;
            padding: .2em .6em .3em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25em;
            margin-top: .3em;
        }

        .welcome .layui-bg-number {
            background-color: #F8F8F8;
        }
    </style>
</head>
<body style="padding:15px">
<div class="welcome layui-col-space10">
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header"><i class="fa fa-paw icon"></i>实时统计</div>
            <div class="layui-card-body">
                <div class="welcome-module">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-xs6">
                            <div class="panel layui-bg-number">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        <span class="label pull-right layui-bg-blue">用户</span>
                                        <h5>在线用户数</h5>
                                    </div>
                                    <div class="panel-content">
                                        <h1 class="no-margins">12345678</h1>
                                        <small>同比昨天增长20%</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="panel layui-bg-number">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        <span class="label pull-right layui-bg-green">网站</span>
                                        <h5>今日访问数</h5>
                                    </div>
                                    <div class="panel-content">
                                        <h1 class="no-margins">87654321</h1>
                                        <small>同比昨天增长30%</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header"><i class="fa fa-send icon icon-blue"></i>快捷入口</div>
            <div class="layui-card-body">
                <div class="welcome-module">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-xs3 layuimini-qiuck-module">
                            <a href="welcome.html">
                                <i class="fa fa-tachometer"></i>
                                <cite>大盘指标</cite>
                            </a>
                        </div>
                        <div class="layui-col-xs3 layuimini-qiuck-module">
                            <a href="welcome.html">
                                <i class="fa fa-money"></i>
                                <cite>财务计费</cite>
                            </a>
                        </div>
                        <div class="layui-col-xs3 layuimini-qiuck-module">
                            <a href="welcome.html">
                                <i class="fa fa-address-card-o"></i>
                                <cite>客户关系</cite>
                            </a>
                        </div>
                        <div class="layui-col-xs3 layuimini-qiuck-module">
                            <a href="welcome.html">
                                <i class="fa fa-database"></i>
                                <cite>数据分析</cite>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>用户趋势</div>
            <div class="layui-card-body">
                <div id="echarts-div" style="width:100%;height:calc(100vh - 280px)"></div>
            </div>
        </div>
    </div>
</div>
<script src="../library/jquery/jquery.js" charset="utf-8"></script>
<script src="../library/layui/layui.js" charset="utf-8"></script>
<script src="../library/echarts/echarts.js" charset="utf-8"></script>
<script src="../library/echarts/shine.js" charset="utf-8"></script>
<script>
    $(function () {
        /**
         * 报表功能
         */
        var echartsDiv = echarts.init(document.getElementById('echarts-div'), 'shine');
        var echartsOption = {
            tooltip: {trigger: 'axis'},
            legend: {data: ['今天', '昨天', '前天']},
            grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
            toolbox: {feature: {saveAsImage: {title: '保存', name: '用户趋势'}}},
            xAxis: {
                type: 'category', boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {type: 'value'},
            series: [
                {
                    name: '今天',
                    type: 'line',
                    smooth: true,
                    data: [150, 232, 201, 154, 190, 330, 360]
                },
                {
                    name: '昨天',
                    type: 'line',
                    smooth: true,
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '前天',
                    type: 'line',
                    smooth: true,
                    data: [120, 132, 101, 134, 90, 230, 210]
                }
            ]
        };
        echartsDiv.setOption(echartsOption);

        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsDiv.resize();
        }
    });
</script>
</body>
</html>
